<template>
  <span 
    class="fl-tag" 
    :class="[
      `fl-tag--${type}`,
      { 'is-round': round }
    ]"
  >
    <slot></slot>
  </span>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'FlTag',
  props: {
    type: {
      type: String,
      default: 'default',
      validator: (value: string) => {
        return ['default', 'success', 'warning', 'danger', 'info'].includes(value)
      }
    },
    round: {
      type: Boolean,
      default: false
    }
  }
})
</script>

<style scoped>
.fl-tag {
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
  height: 24px;
  font-size: 12px;
  line-height: 1;
  border-radius: 4px;
  white-space: nowrap;
}

.fl-tag.is-round {
  border-radius: 12px;
}

/* Tag variants */
.fl-tag--default {
  background-color: #f0f2f5;
  color: #606266;
}

.fl-tag--success {
  background-color: #e1f3d8;
  color: #67c23a;
}

.fl-tag--warning {
  background-color: #faecd8;
  color: #e6a23c;
}

.fl-tag--danger {
  background-color: #fde2e2;
  color: #f56c6c;
}

.fl-tag--info {
  background-color: #e9e9eb;
  color: #909399;
}
</style>